<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <div>
            <!-- 输出msg这个变量的值 -->
            <h3>{{ msg1 }}</h3>
        </div>

        <div class="box">
            <!-- 这个盒子没有被vue管理，所以你怎么写它怎么显示 -->
            <h3>{{ msg2 }}</h3>
        </div>

    </div>

    <!-- 1. 导入Vue -->
    <script src="./vue.js"></script>
    <script>
        // 如果以后要用vue开发，那也只是准备一个大盒子，网页所有内容都是写到这个大盒子里面
        // 即可，就相当于整个网页都是被vue管理的
        // 而且以后也只会写一个 new Vue
        new Vue({
            el: '#app',
            data() {
                return {
                    // 多个变量之间逗号隔开
                    msg1: '第一个msg',
                    msg2: '第二个马杀鸡'
                }
            }
        })
        /*
            // new Vue({
            //     el: '#app',
            //     data: {
            //         msg: '我是第一个msg'
            //     }
            // })
    
            // // 2. 实例化vue对象
            // new Vue({
        
             
            //     el: '.box', // 不可以，因为后面的覆盖前面的
            //     data () {
            //         return {
            //             // 声明变量的地方
            //             msg: '马杀鸡'
            //         }
            //     }
            // })
        */
    </script>
</body>

</html>